<template>
  <!-- 1.3.7 阈值设置-->
  <div>
    <div class="threshold-value bigTableStyle">
      <div class="threshold-value-top endbox">
        <div
          class="back"
          @click="goBack"
        ></div>
      </div>
      <div class="threshold-value-main borderStyle">
        <!-- 主设备 -->
        <RightMainEquipment v-if="thresholdvalueBtn===0" />
        <!-- 辅控 -->
        <RightAuxiliaryControl v-else-if="thresholdvalueBtn===1" />
        <!-- 在线监测 -->
        <RightOnlineMonitor v-else />
      </div>
    </div>
  </div>

</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import RightMainEquipment from "./RightMainEquipment.vue";
import RightAuxiliaryControl from "./RightAuxiliaryControl.vue";
import RightOnlineMonitor from "./RightOnlineMonitor.vue";
import { AuxiliaryMonitorModule } from "@/store/modules/AuxiliaryMonitor";

@Component({
  components: {
    RightMainEquipment,
    RightAuxiliaryControl,
    RightOnlineMonitor,
  },
})
export default class extends Vue {
  get thresholdvalueBtn() {
    return AuxiliaryMonitorModule.thresholdvalueBtn;
  }

  // 返回辅助监控首页
  goBack() {
    this.$router.push("overview");
  }
  

}
</script>

<style lang="scss" scoped>
.threshold-value {
  width: 15.69rem;
  height: 100%;
  box-sizing: border-box;
  padding-left: 0.2rem;
  &-top {
    width: 100%;
    height: 0.3rem;
    margin-bottom: 0.1rem;
    .back {
      width: 0.9rem;
      height: 0.3rem;
      background: url("../../../../assets/img/return.png") no-repeat center
        center;
      background-size: 100% 100%;
      cursor: pointer;
    }
  }

  &-main {
    width: 100%;
    height: calc(100% - 0.4rem);
  }
}
</style>
